<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange"
                        border>
                        查看已删门店
                    </el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="pickerDate" value-format="yyyy.MM.dd" type="daterange" align="right"
                        unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in store_list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="选择入库方式" v-model="formInline.type" class="w160">
                        <el-option label="采购" value="1"></el-option>
                        <el-option label="杂项" value="2"></el-option>
                    </el-select>
                    <el-select v-if="formInline.type==2" placeholder="选择" v-model="formInline.from" class="w160">
                        <el-option v-for="item in fromList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input v-if="formInline.type==1" v-model="formInline.order_id" placeholder="请输入订单号" class="w160">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;">
                            入库时间:查询的日期，日周期为今日6点至次日6点
                            <br> 入库方式:分为采购和杂项以及跨平台三个途径
                            <br> 订单号:输入订单号（精确搜索）
                            <br> 订单状态:根据订单的状态筛选
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row :data="list" v-loading.body="listLoading" border fit size="mini">
                <div v-if="isType1">
                    <el-table-column :key="Math.random()" align="center" label='序号' width="50">
                        <template slot-scope="scope">
                            <span class="indexColor">{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="订单状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status==0">待审核</span>
                            <span v-if="scope.row.status==1">待确认</span>
                            <span v-if="scope.row.status==2">待发货</span>
                            <span v-if="scope.row.status==3">部分收货</span>
                            <span v-if="scope.row.status==4">订单完结</span>
                            <span v-if="scope.row.status==5">收货完成</span>
                            <span v-if="scope.row.status==6">订单取消</span>
                            <span v-if="scope.row.status==7">删除</span>
                            <span v-if="scope.row.status==8">待收货</span>
                            <span v-if="scope.row.status==9">申请退货中</span>
                            <span v-if="scope.row.status==10">退货中</span>
                            <span v-if="scope.row.status==11">退货完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="采购订单编号" prop="order_id">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="当前操作部门">
                        <template slot-scope="scope">
                            供货商
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='下单时间' prop="creat_time">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="入库时间" prop="update_time">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="订单数量（个）" prop="order_num">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='订单金额（元）' prop="order_money">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="入库数量（个）" prop="arrive_num">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='入库金额（元）' prop="arrive_money">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='到货差额（个）' prop="arrive_num">
                        <template slot-scope="scope">
                            {{scope.row.order_num*1-scope.row.arrive_num*1}}
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='退货数量（个）' prop="return_num">
                        <template slot-scope="scope">
                            {{scope.row.return_num?scope.row.return_num:'--'}}
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='退货金额（元）' prop="return_money">
                    </el-table-column>
                    <el-table-column align="center" label="备注">
                        <template slot-scope="scope">
                            {{scope.row.remark?scope.row.remark:'-'}}
                        </template>
                    </el-table-column>
                </div>

                <div v-if="!isType1">
                    <el-table-column :key="Math.random()" align="center" label='序号' width="50">
                        <template slot-scope="scope">
                            <span class="indexColor">{{scope.$index+1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="时间" prop="date"></el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="仓库" prop="house_name"></el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="操作人" prop="clerk"></el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='礼品名称' prop="gift_name">
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="神采礼品编号">
                        <template slot-scope="scope">
                            {{scope.row.no_obsolete}}
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="新礼品编号">
                        <template slot-scope="scope">
                            {{scope.row.no_obsolete}}
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='供应商' prop="supplier"></el-table-column>
                    <el-table-column :key="Math.random()" align="center" label="成本价">
                        <template slot-scope="scope">
                            {{scope.row.chanel*1!=2?0:scope.row.money_cost}}
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='入库数' prop="num"></el-table-column>
                    <el-table-column :key="Math.random()" align="center" label='礼品金额'>
                        <template slot-scope="scope">
                            {{scope.row.chanel*1!=2?0:scope.row.cost}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="备注">
                        <template slot-scope="scope">
                            {{scope.row.remark?scope.row.remark:'-'}}
                        </template>
                    </el-table-column>
                </div>
            </el-table>
        </div>
        <!-- 自定义底部 -->
        <div class="bottom_box">
            <el-pagination class="pull-left" background @current-change="handleCurrentChange"
                :current-page.sync="currentPage" :page-size="20" layout="prev, pager, next, jumper"
                :total="totalDataNumber">
            </el-pagination>
            <span v-if="list" class="pull-right mt10">采购单入库总数: {{num}}件 　采购单入库总金额: {{cost_totle|keepTwoNum}}元</span>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        storeList,
    } from "@/api/storage_control/sundryInput_form";
    import { pickerOptionsF, pickerDateF, optionMaxTime } from '@/utils';
    export default {
        data() {
            return {
                isType1: true,
                cost_totle: '',
                num: '',
                fromList: [{ id: '1', name: '总部配送' }, { id: '2', name: '商家赠送' }, { id: '3', name: '店内捡到' }, { id: '4', name: '其他' }],
                list: null,
                listLoading: false,
                currentPage: 1,
                totalDataNumber: 0,
                detailList: [],
                store_list: null,
                formInline: {
                    time_begin: '',
                    time_end: '',
                    store_id: '',
                    order_id: '',
                    from: '1',
                    type: '1',
                    look_del: '0'
                },
                pickerOptions: pickerOptionsF(),
                pickerDate: pickerDateF()
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.store_list) {
                    vm.getstore();
                }
            })
        },

        methods: {
            lookDelChange() {
                this.getstore();
            },
            getstore() {
                storeList({ look_del: this.formInline.look_del, category_id: 130 }).then(response => {
                    this.store_list = response;
                   let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    } else {
                        if(this.store_list.length > 0) {
                            this.formInline.store_id = this.store_list[0].id;
                        }
                    }
                });
            },
            // 搜索
            searchClick() {
                optionMaxTime(this.pickerDate).then(() => {//最大可选择时间区间
                    this.formInline.time_begin = this.pickerDate[0];
                    this.formInline.time_end = this.pickerDate[1];
                    this.fetchData();
                });
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.currentPage = 1;
                getPage(this.formInline).then(response => {
                    this.totalDataNumber = response.page * 20;
                    this.cost_totle = response.cost_totle
                    this.num = response.num
                    getList(this.formInline).then(response => {
                        this.list = response;
                        this.isType1 = this.formInline.type == 1 ? true : false;
                        this.listLoading = false;
                    })
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
            handleCurrentChange(val) {
                this.listLoading = true;
                getList(this.formInline, val).then(response => {
                    this.list = response;
                    this.isType1 = this.formInline.type == 1 ? true : false;
                    this.listLoading = false;
                });
            },
        }
    }
</script>